<template>
  <div class="login">
    <div class="bg-top">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <section v-if="$route.path==='/rest'" class="login_container">
      <div class="login_container_logo"></div>
      <div class="login_container_title">教培机构社区运营</div>
      <div class="login_container_tip">— 数据管理平台 —</div>
      <div class="login_container_submit" @click="handleLogin">
        登录
      </div>
      <div class="login_container_register" @click="$router.push('/register')">注册</div>
      <p>「 找课大平台，尽在家巴啦；发布精彩课程，覆盖周边五公里 」</p>
    </section>
    <div class="bg-bottom">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <!-- <router-view :key="key"></router-view> -->
    <jblFooter/>
  </div>
</template>

<script>
(function(doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function() {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    if (clientWidth >= 1920) {
      docEl.style.fontSize = '100px'
    } else {
      docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px'
    }
  }

  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
import jblFooter from '@/views/login/compoents/jblFooter'
export default {
  name: 'Rest',
  inject: ['reload'],
  components: {
    jblFooter
  },
  data() {
    return {
      redirect: undefined,
      therQuery: {}
    }
  },
  computed: {
    key() {
      return `${this.$router.name}${new Date()}`
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        console.log(route)
        // this.reload()
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    console.log(this.$route.path)
  },
  methods: {
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    handleLogin() {
      this.$router.push('/mobileLogin')
    }
  }
}
</script>
<style lang="scss" scoped>
  .login{
    position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    width:100%;
    min-width: 1000px;
    height:100vh;
    background: rgba(247,248,252,1);
    overflow: hidden;
    .bg-top{
      // position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left{
        width:400px;
        height: 300px;
        background-image: url('../../../assets/images/1.gif');
        background-size: 100% 100%;
        background-position: center;
      }
      .right{
        position: absolute;
        right: 10%;
        top: -30px;
        width:100px;
        height:100px;
        background: linear-gradient(to bottom, #8DE9FC 0%,#16DBCC 100%);
        border-radius: 50%;
        animation: prog 1s ease-in 0s infinite alternate;
        }
        @keyframes prog
        {
          from {top: -30px;}
          to {top: 10px;;}
        }
    }
    .bg-bottom{
      z-index: 0;
      position: absolute;
      bottom: .8rem;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .left{
        position: absolute;
        left: 10%;
        bottom:0px;
        width:60px;
        height:60px;
        background: linear-gradient(to bottom, #8DE9FC 0%,#16DBCC 100%);
        border-radius: 50%;
        animation: progt 1s ease-in 0s infinite alternate;
        }
        @keyframes progt
        {
          from {bottom: 0px;}
          to {bottom: 20px;;}
        }
      .right{
        position: absolute;
        top: -500px;
        right: 0;
        width:150px;
        height: 250px;
        background-image: url('../../../assets/images/2.gif');
        background-size: 100% 100%;
        background-position: center;
      }
    }
    &_container{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      width:6rem;
      height:7.3rem;
      background:rgba(255,255,255,1);
      border-radius:20px;
      opacity:1;
      &_logo{
        margin-top:.8rem;
        width: 1.1rem;
        height: 1.1rem;
        background-image: url('../../../assets/images/logo.png');
        background-size: 100% 100%;
        background-position: center;
      }
      &_title{
        margin: .20rem 0 .03rem;
        font-size:.50rem;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(78,92,101,1);
        opacity:1;
      }
      &_tip{
        font-size:.36rem;
        font-family:PingFang SC;
        font-weight:400;
        line-height:.50rem;
        color:#4E5C65;
        letter-spacing:.05rem;
        opacity:1;
      }
      &_submit{
        cursor: pointer;
        margin-top:.60rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width:4.32rem;
        height:.80rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:600;
        color:rgba(255,255,255,1);
        // background:rgba(22,219,204,1);
        background:#16DBCC;
        box-shadow:0px 10px 25px rgba(22,219,204,0.15);
        opacity:1;
        border-radius:8px;
      }
      &_register{
        cursor: pointer;
        margin-top:.30rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width:4.32rem;
        height:.80rem;
        font-size:.24rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(179,185,199,1);
        background:rgba(247,248,252,1);
        opacity:1;
        border-radius:8px;
      }
      >p{
        margin-top:.80rem;
        font-size:.18rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(194,199,210,1);
        opacity:1;
      }
      &_appcode{
        width: 260px;
        height: 260px;
        background-image: url('../../../assets/images/app@2x.png');
        background-size: 100% 100%x;
        background-position: center;
      }
      &_appdown{
        margin-top:.10rem;
        width:2.80rem;
        text-align: center;
        font-size:28px;
        font-family:PingFang SC;
        font-weight:600;
        line-height:.40rem;
        color:rgba(78,92,101,1);
        opacity:1;
      }
      &_mode{
        margin-top:.68rem;
        font-size:24rem;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(179,185,199,1);
        opacity:1;
        span:nth-of-type(1),span:nth-of-type(3){
          cursor: pointer;
        }
        span:nth-of-type(2){
          margin:0 .30rem;
        }
      }
    }
  }
</style>
